import React, { Component } from 'react'
import { Menu, Dropdown, Icon } from 'antd';
// 使用LINK实现跳转
import { Link } from 'dva/router';
import style from './index.scss'

// 路由单独写出来下Menu中遍历
const menus = [
    {
        key: 'home',
        path: "/home",
        name: "主页"
    },
    {
        key: 'menus',
        path: "/menus",
        name: "菜单"
    },
    {
        key: 'admin',
        path: "/admin",
        name: "管理"
    },
    {
        key: 'about',
        path: "/about",
        name: "关于我们"
    },
    {
        key: 'register',
        path: "/register",
        name: "注册",
        className: style.register,
        isAuthority: true
    },
    {
        key: 'login',
        path: "/login",
        name: "登录",
        className: style.login,
        isAuthority: true
    }
]

export default class index extends Component {
    constructor(props) {
        // console.log(props) 打印父组件传过来的pathname
        super(props)
        this.state = {
            selectedKeys: []
        }
    }
    // 路由点击路径切割
    handleSetSelectedKeys(pathname) {
        /**
         * 如:/admin = ["/","admin"]
         * 根据'/'把路由地址分割成一个数组
        */
        const temp = pathname.split('/');
        // 数组有多个但如果长度只有1的话视为只有/,就是根路径取home,否则取后面的值
        const key = temp && temp.length < 2 ? "home" : temp[1];
        this.setState({
            selectedKeys: [key]
        })
        // console.log(key)
    }
    /**
    * 当页面刷新时，组件会重新加载，会执行 componentDidMount(cdm) 钩子函数
    * 为解决刷新页面菜单与路由不同步问题，解决方法则放在 cdm 钩子函数里执行
    */
    componentDidMount() {
        //   把父组件传来的pathname传入handleSetSelectedKeys()方法
        this.handleSetSelectedKeys(this.props.location.pathname)
    }
    //  在点击的时候路由也会发生变化;所以也需要用到handleSetSelectedKeys()这个方法让他同步
    UNSAFE_componentWillReceiveProps(nextProps) {//组件更新前调用
        // console.log(nextProps)
        const { pathname } = this.props.location;
        // 判断当前路径和所点击是否相同否刚传入把当前的路径传入handleSetSelectedKeys()方法
        if (nextProps.location.pathname !== pathname) {
            this.handleSetSelectedKeys(nextProps.location.pathname)
        }
    }

    handleClickMenu = ({ key }) => {
        console.log(key)
        //    点击退出后清除本地用户信息
        if (key === 'logout') {
            window.localStorage.clear();
            this.props.history.push('/login');
        }
    }
    // 退出功能菜单 
    menu = (
        <Menu onClick={this.handleClickMenu}>
            <Menu.Item key="logout">
                <span>退出</span>
            </Menu.Item>
        </Menu>
    );

    render() {
        return (
            <nav className={style.header}>
                <a className={style.logo} href="http://www.baidu.com">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="d-block mx-auto"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <line x1="14.31" y1="8" x2="20.05" y2="17.94" />
                        <line x1="9.69" y1="8" x2="21.17" y2="8" />
                        <line x1="7.38" y1="12" x2="13.12" y2="2.06" />
                        <line x1="9.69" y1="16" x2="3.95" y2="6.06" />
                        <line x1="14.31" y1="16" x2="2.83" y2="16" />
                        <line x1="16.62" y1="12" x2="10.88" y2="21.94" />
                    </svg>
                </a>
                {/* 如果class中有特殊符号就要用[]的方式去写 */}
                <Menu
                    className={style['menu-left']}
                    mode="horizontal"
                    defaultSelectedKeys={['home']}
                    selectedKeys={this.state.selectedKeys}
                >
                    {
                        menus.filter(({ isAuthority }) =>
                            // 对带有isAuthority的路由判断并保证localStorage下的user也有数据就让登录和注册功能隐藏,其它路由展示
                            !(isAuthority && localStorage.key && localStorage.email)
                        ).map(({ key, path, name, className }) => (//如果这里用的是{}结果需要用到return
                            <Menu.Item key={key} className={className}>
                                <Link to={path}>{name}</Link>
                            </Menu.Item>

                        ))
                    }
                </Menu>
                {/* 用户email和退出 */}
                {localStorage.email && localStorage.key && (
                    <Dropdown overlay={this.menu} className={style['dropdown-menu']}>
                        <a className="ant-dropdown-link">
                            <span className={style.email}>{localStorage.email}</span>{' '}
                            <Icon className={style.icon} type="down" />
                        </a>
                    </Dropdown>
                )}
            </nav>
        )
    }
}
